﻿
@{
    if (Request.QueryString["type"] == "1")
    {
        CW_Joke joke = (CW_Joke)ViewBag.Joke;
        ViewBag.Title = joke.Title;
        <ul class="am-list am-margin-0 joke-list">
            <li class="am-g">
                <div>
                    <h3 class="joke-title">
                        @joke.Title
                    </h3>
                    <div class="joke-content">                        
                        @Html.Raw(joke.Content)
                    </div>
                </div>
                <div class="joke-list-icon">
                    <a onclick="voteJoke(this,'@joke.Id', 1, '1')" class="btnLike am-icon-thumbs-o-up am-margin-right"><small class="number">@joke.LikeCount</small></a>
                    <a onclick="voteJoke(this,'@joke.Id', 0, '1')" class="btnHate am-icon-thumbs-o-down am-margin-right"><small class="number">@joke.HateCount</small></a>
                </div>
            </li>
        </ul>
    }
    else
    {
        CW_JokePicture joke = (CW_JokePicture)ViewBag.Joke;
        ViewBag.Title = joke.Title;
        <ul class="am-list am-margin-0 joke-list">
            <li class="am-g">
                <div>
                    <h3 class="joke-title">
                        @joke.Title
                    </h3>
                    <div class="joke-content">
                        <img alt="" src="@joke.Content" class="am-img-responsive" />
                    </div>
                </div>
                <div class="joke-list-icon">
                    <a onclick="voteJoke(this,'@joke.Id', 1, '2')" class="btnLike am-icon-thumbs-o-up am-margin-right"><small class="number">@joke.LikeCount</small></a>
                    <a onclick="voteJoke(this,'@joke.Id', 0, '2')" class="btnHate am-icon-thumbs-o-down am-margin-right"><small class="number">@joke.HateCount</small></a>
                </div>
            </li>
        </ul>
    }
}


<div id="jokeSimilar" class="am-padding-top am-margin-top-sm am-g " style="background-color: #fff;">
    <h2 class="am-margin-bottom-xs  tuijian-title">
        其他推荐
        <span @@click="loadJoke" class="am-fr am-margin-right-lg">
            <span class="am-icon-refresh" v-bind:class="{'am-icon-spin':isLoading}"></span>
            <small>换一批</small>
        </span>
    </h2>
    <div class="am-padding am-padding-top-0">
        <template v-if="jokeType==2">
            <a v-for="joke in jokeList" v-bind:href="'@Url.Action("Detail", "Joke", new { type=2 })&id='+joke.Id">
                <div class="am-u-sm-6 am-u-md-4 am-padding-xs">
                    <div class="tuijian-pic2" v-bind:style="{backgroundImage:'url('+joke.Content+')' }"></div>
                    <div class="tuijian-pic-txt">{{joke.Title}}</div>
                </div>
            </a>
        </template>
        <template v-else-if="jokeType==1">
            <ul class="am-list am-list-border">
                <li v-for="joke in jokeList">
                    <a v-bind:href="'@Url.Action("Detail", "Joke", new { type=1 })&id='+joke.Id">
                        <h3 class="joke-title">
                            {{joke.Title}}
                        </h3>
                        <div class="joke-content" v-html="joke.Content">
                        </div>
                    </a>
                </li>
            </ul>
        </template>
</div>
</div>

@section Scripts{
    <script>
        var type = GetQueryString('type');
        $(function () {
            type = type == '' ? '0' : type;
            $(".web-nav li:eq(" + type + ")").addClass("active");
            $(".am-topbar-nav li:eq(" + type + ")").addClass("am-active");
        })

        function voteJoke(obj, jokeid, isLike, type) {
            $(obj).addClass("active");
            var num = $(obj).find(".number").text();
            if (num == "")
                num = "0";
            var NewNum = parseInt(num) + 1;
            $(obj).find(".number").text(NewNum);
            $.ajax({
                type: "POST",
                url: "@Url.Action("Vote")",
                dataType: "json",
                data: {
                    jokeid: jokeid,
                    type: type,
                    isLike: isLike
                },
                success: function (result) {
                }
            });
        }

        var appSidebar = new Vue({
            el: '#jokeSimilar',
            data: {
                jokeList: [],
                isLoading: false,
                jokeType:1
            },
            methods: {
                loadRandomData: function () {
                    var self = this;
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("RandomSidebar")",
                        dataType: "json",
                        data: "type=" + type,
                        success: function (result) {
                            console.log(result);
                            if (result.state == "success") {
                                self.jokeList = result.jokes;
                            }
                        },
                        beforeSend: function () {
                            self.isLoading = true;
                        },
                        complete: function () {
                            self.isLoading = false;
                        }
                    });
                },
                loadJoke: function () {
                    if (!this.isLoading)
                        this.loadRandomData();
                }, 
            },
            mounted: function () {
                this.$nextTick(function () {
                    this.loadRandomData();
                    this.jokeType = type;
                })
            }
        })

    </script>
}

